<template>
	<view class="total">
		<view class="touxiang">
			<image :src="imgsrc" class="touxiang-img"></image>
			
			<!-- <input class="touxiang-img" type="file" placeholder="请输入头像" @change="uploadImg" />  -->
			
		</view>
		
		
		<view class="list">
			<view class="name">
				<text class="nicheng">昵称</text>
				<input class="shurunicheng" focus placeholder="请输入昵称" v-model="userInfo.name"/>
				<hr>
			</view>
			<view class="phone">
				<text class="shouji">手机</text>
				<input class="shurushouji" placeholder="请输入手机" v-model="userInfo.phone"/>
				<hr>
			</view>
			<view class="sex">
				<text class="xingbie">性别</text>
				<view class="shuruxingbie">
					<radio-group @change="chang" class="danxuanxingbie" v-model="userInfo.sex">
						<label v-for="item in radioGroup" :key="item">
							<radio :value="item" :checked="item==userInfo.sex" />{{item}}
						</label>
					</radio-group>
				</view>
			</view>
			<view class="birthday">
				<text class="shengri">生日</text>
				<view class="shurushengri">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{userInfo.birthday| formatDate}}</view>
					</picker>
				</view>
			</view>
		</view>
		
		<view class="warn">
			<text class="warn-text">
				根据未成年人保护相关法律法规的要求，我们不主动处理 14 周岁以下未成年人的个人信息。如果您为14周岁以下的用户，请勿填写您的个人资料
			</text>
		</view>
		
		<view class="save">
			<button class="btnSave" @click="changeInfo">保存</button>
		</view>
		<u-toast ref="SaveErr" />
	</view>
</template>

<script>
	import {baseUrl} from "../../utils/request.js" ;
	//出生日期
		function getDate(type) {
			const date = new Date();
		 
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
		 
			if (type === 'start') {
				year = year - 10;
			} else if (type === 'end') {
				year = year + 10;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
		 
			return `${year}-${month}-${day}`;
		}

	export default {
		filters:{
		            formatDate(date){
		                console.log(date)
		                let newDate = new Date(date);
		                let year = newDate.getFullYear();
		                let month = (newDate.getMonth()+1).toString().padStart(2,0);
		                let day = newDate.getDay().toString().padStart(2,0);
						
		                // return year + '-' + month + '-' + day;
		                return date;
		            }
		        },
		data() {
			return {
				userInfo:getApp().globalData.userInfo,
				oldname:getApp().globalData.userInfo.name,
				imgsrc: "../../static/Hot.png",
				value: '',
				type: 'text',
				border: true,
				// 单选框数据
				activeRadio: '', //存的是单选按钮选中的value值
				radioGroup: ['男', '女'],
				//出生日期
				date: getDate({
								format: true
							}),
				startDate: getDate('start'),
				endDate: getDate('end'),
			}
		},
		 methods: {
		                // 单选按钮发生改变时触发的方法
			chang(e) {
				this.activeRadio = e.detail.value;  //选中按钮的value值
				this.userInfo.sex = e.detail.value;
				// console.log(this.activeRadio);
			},
			changeInfo(){
				this.userInfo.params = {}
				this.userInfo.params.oldname = this.oldname
				console.log(this.userInfo)
				uni.request({
				    // url: 'https://www.fastmock.site/mock/68c3c014a443685834fb331ec92e7e9d/show/shop',
					method:"PUT",
				    url: baseUrl+'/mixuebingcheng/user',
					data:this.userInfo,
				    success: (res) => {
				        console.log(res);
						if(res.data.code!=200)
							this.$refs.SaveErr.show({
								title: res.data.msg,
								type: 'error',
								
							})
						else {
							this.$refs.SaveErr.show({
								title: "修改成功",
								type: 'success'
							})
							uni.switchTab({
								url: '/pages/my/my'
							})
						}
				    }
				});
			},
			//出生日期
			bindDateChange: function(e) {
				this.date = e.detail.value;
				console.log(e)
				this.userInfo.birthday = e.detail.value
			},
			// 图片上传
			uploadImg(){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						console.log(JSON.stringify(res.tempFilePaths));
					}
				});
			},
		}
	}
</script>

<style>
	.total{
		background-color: #F5F5F5;
		
		justify-content: center; 
		align-items: center; 
	}
	.touxiang{
		height: 150px;
		display: flex; 
		background-color: #FFFFFF;
	}
	.touxiang-img{
		position: absolute;
		width: 100px;
		height: 100px;
		left: 37%;
		top: 13px;
		background-color: rgb(150, 0, 0, 0.1);
		border-radius: 100%;
	}
	.list{
		padding-top: 15px;
		padding-left: 15px;
		padding-right: 15px;
		padding-bottom: 15px;
		margin-top: 15px;
		background-color: #FFFFFF;
	}
	.name{
		display: flex;
		margin-bottom: 30px;
	}
	.nicheng{
		flex: 1;
		
	}
	.shurunicheng{
		flex: 5;
	}
	.phone{
		margin-bottom: 30px;
		display: flex;
	}
	.shouji{
		flex: 1;
	}
	.shurushouji{
		flex: 5;
	}
	.sex{
		display: flex;
		margin-bottom: 30px;
	}
	.xingbie{
		flex: 1;
		/* background-color: aqua; */
	}
	.shuruxingbie{
		flex: 5;
	}
	.birthday{
		/* margin-bottom: 30px; */
		display: flex;
	}
	.shengri{
		flex: 1;
		/* background-color: aqua; */
	}
	.shurushengri{
		flex: 5;
	}
	.warn{
		padding-left: 15px;
		padding-right: 15px;
		margin-bottom: 50px;
		margin-top: 10px;
	}
	.warn-text{
		color: #AAB1C4;
	}
	.save{
		
	}
	.btnSave{
		background-color: #E60012;
		color: #FFFFFF;
		width: 350px;
	}
</style>